<template>
  <ql-config-provider
    :ql-upload="{
      action:themeStore.upload,
      headers: {
        DT_TOKEN: userStore.token
      }
    }"
    :locale="{...zhCn, ...qlZhCn}"
    :button="config"
  >
    <router-view />
  </ql-config-provider>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { zhCn as qlZhCn } from 'qin-lantern/locale'

import useThemeStore from '@/store/theme'
import useSystemStore from '@/store/system'
import useUserStore from '@/store/user'
import { useDark, useResizeObserver } from '@vueuse/core'

const config = reactive({
  autoInsertSpace: true
})
const userStore = useUserStore()

// 深色模式
const themeStore = useThemeStore()

const isDark = useDark()

themeStore.setScheme(isDark.value)

// 监听浏览器窗口改变

const systemStore = useSystemStore()
// 监听浏览器宽度
useResizeObserver(document.body, (entries) => {
  const entry = entries[0]
  const { width } = entry.contentRect
  systemStore.setWindowWidth(width)
})
</script>

<style lang="scss" scoped>
</style>
